<template>
  <div class="Register">
    <!-- 顶部页面标题栏 -->
    <div class="bg"></div>
    <div class="formBody">
      <van-cell-group>
        <van-field required v-model="fieldValues.name" label="姓名" placeholder="请输入姓名"></van-field>
        <van-field required v-model="fieldValues.age" label="年龄" type="number" placeholder="请输入年龄"></van-field>
        <van-field required v-model="fieldValues.idCard" label="身份证" placeholder="请输入身份证号"></van-field>
        <van-cell required title="性别" class="radioBox">
          <van-radio-group v-model="fieldValues.gender" class="radioGroup">
            <van-radio name="男">男</van-radio>
            <van-radio name="女">女</van-radio>
          </van-radio-group>
        </van-cell>
        <van-field
          required
          readonly
          clickable
          label="行政区划"
          :value="fieldValues.area"
          placeholder="选择区划"
          @click="showPicker = true"
        />
        <van-field required v-model="fieldValues.rid" label="详细地址" placeholder="请输入详细地址"></van-field>
        <van-field required v-model="fieldValues.phone" type="tel" label="手机号码" placeholder="请输入手机号码"></van-field>
      </van-cell-group>

      <van-cell-group class="butBox">
        <van-button type="info" class="butitem" @click="submitRegister">认证</van-button>
      </van-cell-group>
    </div>

    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        @change="onChange"
        show-toolbar
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="confirmPick"
        ref="picker"
      />
    </van-popup>
  </div>
</template>
<script>
import bus from "../../plugins/eventBus.js";
export default {
  data() {
    return {
      area: {},
      showPicker: false,
      columns: [
        {
          values: [],
          valuesorigin: [],
          className: "column1"
        },
        {
          values: [],
          valuesorigin: [],
          className: "column2"
        }
      ],
      fieldValues: {
        rid: "", // 房屋编码
        dataAreaCode: "", //区划编码
        dataArea: "", //区划编码
        name: "",
        idCard: "", //身份证
        phone: "", //手机号
        age: "", //年龄
        gender: "男", //性别（男，女）
        attachId: "", // 头像id
        userName: "", // 用户名
        wxId: "", //微信号
        area: ""
      }
    };
  },
  created() {
    this.rquestPostTemperature();
  },
  methods: {
    back() {
      this.fieldValues.address = "请选择区域地址";
      this.$router.isBack = true; // 将返回状态置为触发态，以边路由监听触发返回动画
      this.$router.back(); // 路由向后退一步
    },
    confirmPick(val) {
      if (val[2]) {
        let column_index = this.columns[2].values.indexOf(val[2]);
        this.fieldValues.dataAreaCode = this.columns[2].valuesorigin[
          column_index
        ].dataAreaCode;
      } else if (val[1]) {
        let column_index = this.columns[1].values.indexOf(val[1]);
        this.fieldValues.dataAreaCode = this.columns[1].valuesorigin[
          column_index
        ].dataAreaCode;
      }
      this.fieldValues.area = val.join(",");
      this.showPicker = false;
    },
    cancelPick() {
      this.show = false;
    },
    onChange(picker, values, indexs) {
      let column_index = this.columns[indexs].values.indexOf(values[indexs]);
      if (indexs === 0) {
        var valuesorigin1 = [];
        var values1 = [];
        this.area.Committe.forEach(element => {
          if (
            element.parentId === this.columns[0].valuesorigin[column_index].id
          ) {
            valuesorigin1.push(element);
            values1.push(element.name);
          }
        });
        this.columns[1].valuesorigin = valuesorigin1;
        this.columns[1].values = values1;
        picker.setColumnValues(1, values1);
        // var valuesorigin2 = [];
        // var values2 = [];
        // this.area.grid.forEach(element => {
        //   if (element.parentId === this.columns[1].valuesorigin[0].id) {
        //     valuesorigin2.push(element);
        //     values2.push(element.name);
        //   }
        // });
        // this.columns[2].valuesorigin = valuesorigin2;
        // this.columns[2].values = values2;
        // picker.setColumnValues(2, values2);
      } else if (indexs === 1) {
        // var valuesorigin2 = [];
        // var values2 = [];
        // this.area.grid.forEach(element => {
        //   if (
        //     element.parentId === this.columns[1].valuesorigin[column_index].id
        //   ) {
        //     valuesorigin2.push(element);
        //     values2.push(element.name);
        //   }
        // });
        // this.columns[2].valuesorigin = valuesorigin2;
        // this.columns[2].values = values2;
        // picker.setColumnValues(2, values2);
      }
    },
    submitRegister() {
      if (!this.fieldValues.name) {
        this.$toast("请填写姓名");
        return;
      }
      if (!this.fieldValues.age) {
        this.$toast("请填写年龄");
        return;
      }
      if (!this.fieldValues.idCard) {
        this.$toast("请填写身份证号");
        return;
      }
      if (!this.fieldValues.idCard) {
        this.$toast("请填写身份证号");
        return;
      }
      if (!this.fieldValues.dataAreaCode) {
        this.$toast("请选择行政区划");
        return;
      }
      if (!this.fieldValues.rid) {
        this.$toast("请填写详细地址");
        return;
      }
      if (!this.fieldValues.phone) {
        this.$toast("请输入手机号");
        return;
      }
      if (sessionStorage.getItem("userInfo")) {
        let userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
        this.fieldValues.attachId = userInfo.headImgUrl;
        this.fieldValues.userName = userInfo.nickname;
        this.fieldValues.wxId = userInfo.openId;
        // this.fieldValues.wxId = 'o9g_ywafeOGzxbOQ_IQ7HXKOSDIM'
        this.post("/publicUser/registerPublicUser", {
          ...this.fieldValues
        }).then(r => {
          if (r.success) {
            // 校验系统用户信息，是否已完善信息
            this.post("publicUser/loginPublicUser", {
              wxid: JSON.parse(sessionStorage.getItem("userInfo")).openId
              // wxid:'o9g_ywafeOGzxbOQ_IQ7HXKOSDIM'
            })
              .then(res => {
                if (res.success) {
                  localStorage.setItem("isAuth", res.success);
                  localStorage.setItem("authObject",res.object)
                  this.$toast.success("认证成功");
                  setTimeout(() => {
                    // this.slow.setApiData("isAuth", res.success);
                    // this.slow.setApiData("authObject", res.object);
                    this.$router.back();
                  }, 2000);
                } else {
                  this.$toast("认证失败");
                }
              })
              .catch(err => {
                console.log(err.toString());
              });
          } else {
          }
        });
      } else {
        this.$toast("微信登陆失败");
        return;
      }
    },

    // 请求获取区划数据
    rquestPostTemperature() {
      this.$toast.loading({
        message: "区划加载中...",
        forbidClick: true
      });
      this.post("region/regionTree")
        .then(res => {
          this.$toast.clear();
          this.area = res.map;
          // this.area.area.forEach(element => {
          //   this.columns[0].valuesorigin.push(element);
          //   this.columns[0].values.push(element.name);
          // });
          this.area.street.forEach(element => {
            if (element.parentId === this.area.area[0].id) {
              this.columns[0].valuesorigin.push(element);
              this.columns[0].values.push(element.name);
            }
          });
          this.area.Committe.forEach(element => {
            if (element.parentId === this.columns[0].valuesorigin[0].id) {
              this.columns[1].valuesorigin.push(element);
              this.columns[1].values.push(element.name);
            }
          });
          // this.area.grid.forEach(element => {
          //   if (element.parentId === this.columns[1].valuesorigin[0].id) {
          //     this.columns[2].valuesorigin.push(element);
          //     this.columns[2].values.push(element.name);
          //   }
          // });
        })
        .catch(err => {
          this.$toast.clear();
          console.log("异常", err);
        });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "~@/smobile.scss";
.Register {
  .bg{
    background: $sm-bg-color-grey;
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .header {
    padding: $sm-spaceing-block-sm 0 $sm-spaceing-block-sm 0;

    position: absolute;
    width: $sm-img-per-max;
    height: 21px;
    background: $sm-bg-color;
    z-index: 2;

    display: flex;
    flex-direction: row nowrap;
    justify-content: flex-start;
    .backIcon {
      position: absolute;
      white-space: nowrap;
      height: $sm-icon-px-md;
      z-index: 4;

      .iconImage {
        height: $sm-icon-px-md;
        width: $sm-icon-px-md;
        transform: rotateY(180deg);
      }
    }

    .theme {
      position: absolute;
      font-weight: bold;
      width: $sm-img-per-max;
      text-align: center;
      white-space: nowrap;
      z-index: 3;
    }
  }
  .formBody {
    background: $sm-bg-color-grey;
    color: $sm-text-color;
    font-size: $sm-font-size-lg;

    // overflow: auto;
    // height: calc(100vh - 41px);
    // margin: 41px 0 0 0;

    .radioBox {
      .van-cell__title {
        flex: 0 1 auto;
      }
      .van-cell__value {
        flex: 1 0 auto;

        .radioGroup {
          display: flex;
          flex-direction: row;
          justify-content: space-around;
        }
      }
    }

    .butBox {
      margin: $sm-spacing-col-base 0 $sm-spacing-col-base 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background: $sm-bg-color-grey;

      .butitem {
        width: $sm-img-per-xxxl;
      }
    }
  }
}
</style>